<template>
<div class="box_bg" >
    <h2 class="box_tit">
        <i class="icon icon1"></i>个人中心
    </h2>
    <div class="blank20"></div>
    <div class="seting components_edit_modal components_edit3_modal">
        <!-- 表格 -->
        <table class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-transition ">
          <tbody class="el-table__body">
            <tr>
              <td width="130px"><label>账户：</label></td>
              <td width="300px">{{personalData.email}}</td>
              <td width="130px"><label>姓名：</label></td>
              <td width="300px">{{personalData.name}}</td>
            </tr>
            <tr>
              <td width="130px"><label>管理中心：</label></td>
              <td width="300px">{{personalData.managermentCenter}}</td>
              <td width="130px"><label>专业组：</label></td>
              <td width="300px">{{personalData.professionGroup}}</td>
            </tr>
          </tbody>
        </table>
        <!-- 表单开始 -->
        <el-form ref="personalData" :model="personalData" :rules="rules" :inline="true" label-width="100px" style="margin-top:20px;overflow:hidden;">
            <!-- <el-form-item label="性别：">
                <el-radio-group v-model="personalData.sex">
                    <el-radio :label="0">男</el-radio>
                    <el-radio :label="1">女</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="民族："  prop="nation">
                <el-select v-model="personalData.nation" placeholder="请选择民族">
                    <el-option v-for="item in selectOptions.nationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="政治面貌：" prop="politicalStatus">
                <el-select v-model="personalData.politicalStatus" placeholder="请选择政治面貌">
                    <el-option v-for="item in selectOptions.politicalStatus" :key="item.value" :label="item.label" :value="item.value">{{item.label}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日：" prop="birthdate">
                <el-date-picker v-model="personalData.birthdate" type="date" placeholder="请填写生日"></el-date-picker>
            </el-form-item>
            <el-form-item label="身份证：" prop="idcard">
                <el-input v-model="personalData.idcard" placeholder="请填写身份证"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
                <el-input v-model="personalData.email" placeholder="请填写邮箱"></el-input>
            </el-form-item>
            <el-form-item label="电话：" prop="mobile">
                <el-input type="tel" v-model="personalData.mobile" placeholder="请填写电话号码"></el-input>
            </el-form-item>
            <el-form-item label="最高学历：" prop="educational">
                <el-input v-model="personalData.educational" placeholder="请填写最高学历"></el-input>
            </el-form-item>
            <el-form-item label="学位：" prop="degree">
                <el-input v-model="personalData.degree" placeholder="请填写学位"></el-input>
            </el-form-item>
            <el-form-item label="毕业学校：" prop="graduationSchool">
                <el-input v-model="personalData.graduationSchool" placeholder="请填写毕业学校"></el-input>
            </el-form-item>
            <el-form-item label="所学专业：" prop="profession">
                <el-input v-model="personalData.profession" placeholder="请填写所学专业"></el-input>
            </el-form-item>
            <el-form-item label="毕业时间：" prop="workTime">
                <el-date-picker v-model="personalData.workTime" type="date" placeholder="请选择入职时间"></el-date-picker>
            </el-form-item>

            <el-form-item label="状态：" prop="state">
                <el-radio-group v-model="personalData.state">
                    <el-radio :label="1">在职 </el-radio>
                    <el-radio :label="2">离职</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="入职时间：" prop="workTime">
                <el-date-picker v-model="personalData.workTime" type="date" placeholder="请选择入职时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="职称名称：" prop="workTime">
                <el-input v-model="personalData.profession" placeholder="请填写职称名称"></el-input>
            </el-form-item>
            <el-form-item label="职称获取时间：" prop="workTime">
                <el-date-picker v-model="personalData.workTime" type="date" placeholder="请选择职称获取时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="职称认证单位：" prop="workTime">
                <el-input v-model="personalData.profession" placeholder="请填写职称认证单位"></el-input>
            </el-form-item>
            <el-form-item label="职业资格证书：" prop="workTime" class="lineblock">
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="toCertificateAdd">添加职业资格证书</el-button>
                <div class="scrollBarX" style="border-right: 1px solid #e6ebf5;">
                    <el-table
                        :data="certificateArr"
                        v-show="certificateArr.length>0"
                        style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="证书名称"
                            align="center"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="times"
                            label="获取时间"
                            align="center"
                            width="180">
                            <!-- <template slot-scope="scope">
                                {{moment(scope.row.times).format('YYYY-MM-DD')}}
                            </template> -->
                        </el-table-column>
                        <el-table-column
                            prop="branch"
                            align="center"
                            label="发放单位">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button  type="text" size="small" @click="toDeleteCertificate(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
            <el-form-item label="工作经验：" prop="remark" class="lineblock textareaBox">
              <el-input type="textarea" v-model="personalData.remark" placeholder="请输入工作经验"></el-input>
            </el-form-item>
            <!-- <el-form-item label="用户密码：" prop="password" v-if="this.$route.query.id == undefined">
                <el-input v-model="personalData.password" placeholder="请填写用户密码"></el-input>
            </el-form-item> -->
        </el-form>
        <div class="components_handle_btns">
            <el-button  class="btns" @click="toEditpersonalData('personalData',$event)" type="text" size="small">确定</el-button>
            <el-button  class="btns cancel" type="text" size="small">重置</el-button>
        </div>
    </div>
        <div class="certificateDialog">
            <el-dialog width="500px" title="添加职业证书" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
                <el-form ref="certificateData" :model="personalData" :rules="rules" label-width="120px">
                    <el-form-item label="职业资格证书名称："  prop="name">
                        <el-input v-model="certificateData.name" placeholder="请输入职业资格证书名称"></el-input>
                    </el-form-item>
                    <el-form-item label="职业证书获取时间："  prop="times">
                        <el-date-picker v-model="certificateData.times" type="date" placeholder="请选择职业证书获取时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="职业证书发放单位："  prop="branch">
                        <el-input v-model="certificateData.branch" placeholder="请输入职业证书发放单位"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary"
                    @click="toAddCertificate"
                    v-loading.fullscreen.lock="fullscreenLoading"
                    size="small">确 定</el-button>
                    <el-button size="small">关 闭</el-button>
                </div>
            </el-dialog>
        </div>
</div>
</template>

<script>
  import moment from 'moment'
export default {
    data() {
    // 密码规范检测
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passWord.checkPass !== '') {
          this.$refs.passWord.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passWord.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
        isLayer:true,
        state: false,
        fullscreenLoading: false,
        personalData:{
            birthdate: 1510070400000,
            degree: "string",
            educational: "string",
            email: "3@bbs-step.com",
            graduationDate: 1510070400000,
            graduationSchool: "string",
            id: 38,
            jobTitle: "string",
            jobTitleCompan: "string",
            jobTitleDate: 1510070400000,
            managermentCenter: "4",
            name: "江兆付",
            nation: 14,
            password: "fd89b83b0f3910d3c117e656cb40731f",
            politicalStatus: 3,
            profession: "string",
            professionGroup: 6,
            salt: "9e5cd2c07e9848bbaedcaa3d8bd5a1cf",
            sex: 0,
            state: 0,
            workTime: 1510070400000
        },
        certificateArr:[],
        certificateData:{
            name:'',
            times:'',
            branch:''
        },
        selectOptions:{
            nationList:[],
            politicalStatus:[],
            professionGroup:[]
        },
        rules:{
            passWord:{
                oldPassword: [
                        { required: true, message: "原始密码必须填写", trigger: "blur" }
                    ],
                newPassword: [
                    { required: true, message: "请填写新密码", trigger: "blur" },
                    { validator: validatePass, trigger: 'blur' }
                    ],
                checkPass: [
                    { required: true, message: "请再次填写密码", trigger: "blur" },
                    { validator: validatePass2, trigger: 'blur' }
                ],
            }
        },
        Type: '' //这是判断弹层内容的show或者hidden、
    };
    },
    mounted() {
        // 本地获取登录用户数据
        this.personalData = JSON.parse(localStorage.userInfo);
        this.personalData.nation = (this.personalData.nation? this.personalData.nation :'') + '';
        this.personalData.politicalStatus = (this.personalData.politicalStatus? this.personalData.politicalStatus :'') + '';
        //获取民族信息
        this.getNation();
        //获取政治面貌信息
        this.getPoliticalStatus();
        //获取政治面貌信息
        this.getProfessionGroup();
    },
    methods: {
        //获取民族的列表
        getNation(){
            let self = this;
            self.axios({
                method: "get",
                url: api.dictsTypesSubListUrl,
                params:{
                "type":'ethnic_group'
                }
            })
            .then(function(response) {
                if(response.data.success){
                    self.selectOptions.nationList = response.data.data;
                }else{
                    self.$message({
                        duration: 1000,
                        message: response.data.msg,
                        center: true,
                        type: "error"
                    });
                }
            })
        },
        //获取政治面貌的列表
        getPoliticalStatus(){
            let self = this;
            self.axios({
                method: "get",
                url: api.dictsTypesSubListUrl,
                params:{
                "type":'politics_status'
                }
            })
            .then(function(response) {
                if(response.data.success){
                    self.selectOptions.politicalStatus = response.data.data;
                }else{
                    self.$message({
                        duration: 1000,
                        message: response.data.msg,
                        center: true,
                        type: "error"
                    });
                }
            })
        },
        //获取政治面貌的列表
        getProfessionGroup(){
            let self = this;
            self.axios({
                method: "get",
                url: api.professionGroup.queryAllList,
            })
            .then(function(response) {
                if(response.data.success){
                    _.forEach(response.data.data,function(item){
                        item.value = item.value+"";
                    })
                   self.selectOptions.professionGroup = response.data.data;
                }else{
                    self.$message({
                        duration: 1000,
                        message: response.data.msg,
                        center: true,
                        type: "error"
                    });
                }
            })
        },
        toCertificateAdd(){
            this.state = true;
        },
        //确认添加证书
        toAddCertificate(){
            this.certificateData.times = moment(this.certificateData.times).format('YYYY-MM-DD')
            this.certificateArr.push(this.certificateData);
            console.log(this.certificateData);
            this.certificateData = {};
            this.state = false;
        },
        // 删除某一项证书
        toDeleteCertificate(item){
            this.certificateArr.splice(item,1)
        },
        // 修改提交信息
        toEditpersonalData(formName,event){
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log("通过验证");
                }
            });
        }
    },
    components: {}
};
</script>
<style scoped>
.seting{
  width: 1000px;
  overflow: hidden;
}
.el-select,.el-input,.el-form--inline .el-form-item__content{
    width: 193px;
}
.certificateDialog .el-select,.certificateDialog .el-input{
    width: 100%;
}
</style>